<template>
	<view>
		<uni-forms ref="form" :modelValue="formInfo" >
			<uni-forms-item label="收货人" required name="username">
				<uni-easyinput v-model="formInfo.username" placeholder="请输入收货人" />
			</uni-forms-item>
			<uni-forms-item label="手机号" required name="tel">
				<uni-easyinput v-model="formInfo.tel" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item label="地址">
				<uni-easyinput v-model="formInfo.address" placeholder="请输入详细地址" />
				<button @click="handleLocation">定位</button>
			</uni-forms-item>
			<view class="">
				<text>是否为默认地址</text>
				<switch @change="onChange" :checked="isDefault" />
			</view>

		</uni-forms>
		<button @click="submitForm">Submit</button>
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
		  <image class="avatar" :src="avatarUrl"></image>
		</button> 
		<input type="nickname" class="weui-input" placeholder="请输入昵称"/>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import store from '@/store/index.js'; //需要引入store
	export default {
		data() {
			return {
				isDefault: false,
				addressInfo: '',
				formInfo: {
					username: '',
					tel: '',
					address: ''
				},
				avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
					tel: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}, {
							// pattern: /^1[3-9]\d{9}%/,
							// errorMessage: '请输入正确格式的手机号',
							validateFunction: function(rule, value, data, callback) {
								console.log(rule,value,data,callback)
								console.log(value, '===value')
								if (/^1[3-9]\d{9}$/.test(value)) {
									return true
								}
								callback('请输入正确格式的手机号')
								return false
							}
						}]
					}
				}
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			...mapMutations(['addAdress', 'editAddress']),
			 onChooseAvatar(e) {
			    const { avatarUrl } = e.detail 
			    this.avatarUrl = avatarUrl
					console.log(avatarUrl)
					wx.downloadFile({
						"url": avatarUrl,
						success(res) {
							console.log(res)
						}
					})
			  },
			onchange(e) {
				console.log(e)
				this.addressInfo = e.detail.value.map(item => item.text).join('/')

			},
			handleLocation() {
				wx.authorize({
					"scope": "scope.userInfo",
					success(res) {
						console.log(res,'res')
					}
				})
				console.log(uni.getUserProfile)
				wx.getUserProfile({
					desc: '用户信息展示',
					success(res) {
						console.log(res.userInfo)
					}
				})
				// uni.getLocation({
				// 	type: "gcj02",
				// 	success: (res) => {
				// 		uni.chooseLocation({
				// 			longitude: res.longitude.toString(),
				// 			latitude: res.latitude.toString(),
				// 			success: (result) => {
				// 				this.formInfo = {
				// 					...this.formInfo,
				// 					address: result.address
				// 				}
				// 				console.log(result)
				// 			}
				// 		})
				// 	}
				// })
			},
			submitForm() {
				// console.log()
				this.$refs.form.validate().then(res => {
					console.log(res, 'success')
				}).catch(err => {
					console.log(err, 'err')
				})
				console.log(this.formInfo, 'fomrINFO')
				console.log(this.$options, '///', )
				// if (this.$mp.query?.id) {
				// 	this.editAddress({
				// 		id: this.$mp.query?.id,
				// 		...this.formInfo,
				// 		addressInfo: this.addressInfo,
				// 		isDefault: this.isDefault
				// 	})
				// } else {
				// 	this.addAdress({
				// 		...this.formInfo,
				// 		addressInfo: this.addressInfo,
				// 		isDefault: this.isDefault
				// 	})
				// }
				// uni.navigateBack(1)
			},
			onChange(e) {
				this.isDefault = e.detail.value;
			}
		},
		onLoad(options) {
			const {
				addressList
			} = store.state;
			const {
				username,
				tel,
				address,
				addressInfo,
				isDefault
			} = addressList.find(item => item.id == options.id) || {}
			this.formInfo = {
				username,
				tel,
				address
			}
			this.addressInfo = addressInfo;
			this.isDefault = isDefault;
		}
	}
</script>

<style>

</style>